<template>
	<div>
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-container>
				<Aside :isCollapse="isCollapse"></Aside>
				<el-main>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="item.path">
							<span class="no-redirect" v-if="index === breadcrumbData.length - 1">{{ item.meta.title }}</span>
							<span class="redirect" v-else @click="onLinkClick(item)">{{ item.meta.title }}</span>
						</el-breadcrumb-item>
					</el-breadcrumb>
					<router-view>
					</router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import Aside from '@/components/backend/common/aside.vue'
import Header from '@/components/backend/common/header.vue'
import Index from '@/components/backend/common/index.vue'
export default {
	data() {
		return {
			isCollapse: false,
			text: '<<',
			breadcrumbData: []
		}
	},
	methods: {
		getBreadcrumbData() {
			this.breadcrumbData = this.$route.matched.filter(item => item.meta && item.meta.title)
		},
		onLinkClick(item) {
			this.$router.push(item.path)
		},
		handleChange() {
			this.isCollapse = !this.isCollapse
			this.text = this.isCollapse ? '>>' : '<<'
		}
	},
	watch: {
		$route: {
			immediate: true,
			handler(n, o) {
				this.getBreadcrumbData()
			}
		}
	},
	components: {
		Aside,
		Header,
		Index,
	}
}
</script>
<style lang="less" scoped>
.el-button {
	width: 40px;
	height: 40px;
	align-self: flex-start;
	/* 让按钮位于最左边 */
}

.bread-crumb {
	display: flex;
	flex-direction: column;
	height: 40px;
	line-height: 38px;
	background-color: rgb(248, 255, 154);
}

.el-header {
	padding: 0;
	/* background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px; */
}

body {
	margin: 0;
	padding: 0;
}

.el-main {
	background-color: #e9eef3;
	height: calc(100vh - 60px);
	padding: 0;
}

.el-main1 {
	padding: 0;
}
</style>
<style>
/* 路由的简单过渡动画效果 */
.v-enter {
	opacity: 0;
}

.v-enter-to {
	opacity: 1;
}

.v-enter-active {
	transition: 0.3s;
}

.v-leave {
	opacity: 1;
}

.v-leave-to {
	opacity: 0;
}

.v-leave-active {
	transition: 0.3s;
}
</style>